<template>

	<div>
			<div>
				<el-row :gutter="20">
					<el-col :span="5">
						<div class="grid-content bg-purple">实时光照强度：{{ intensity}} Lux</div>
					</el-col>
					<!-- <el-col :span="8">
						<div class="grid-content bg-red">最新异常数据：{{abnormal}} Lux 时间点为：{{time}}</div>
					</el-col> -->
				</el-row>
			</div>
			<div style="height: 450px;" ref="chartContainer">
			
			</div>
			
			<div>
				<el-row :gutter="20">
					<el-col :span="5">
						<div class="grid-content bg-purple">平均光照强度: {{ average}} Lux</div>
					</el-col>
					<el-col :span="10">
						<div class="grid-content bg-purple">根据过去十组数据预测下一个光照强度： {{ nxtinten}}Lux</div>
					</el-col>
				</el-row>
			</div>
		</div>

</template>

<script>
	import * as echarts from 'echarts';
	import {
		gettemhum,
		UpdatePage,
		getintnext,
	} from '../../api/index';
	import Schart from 'vue-schart';
	export default {
		// name: 'basecharts',
		components: {
			Schart
		},
		data() {
			return {
				nxtinten:'',
				chartContainer:null,
				time: 'xx:xx:xx',
				abnormal: '--',
				average: 0,
				intensity: '',
				count: 0,
				option: {
					color:'green',
					title: {
						text: '光照强度数据图表'
					},
					tooltip: {
						trigger: 'axis'
					},
					// legend: {},
				
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: [0,0,0,0,0,0,0,0,0,0]
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value} Lux'
						}
					},
					series: [{
							name: 'Highest',
							type: 'line',
							data: [0,0,0,0,0,0,0,0,0,0],
							markPoint: {
								data: [{
										type: 'max',
										name: 'Max'
									},
									{
										type: 'min',
										name: 'Min'
									}
								]
							},
							markLine: {
								data: [{
									type: 'average',
									name: 'Avg'
								}]
							}
						},
						
					]
				},
			};
		},
		created() {
			// 在组件创建时启动轮询
			this.startPolling();

		},
		beforeDestroy() {
			// 在组件销毁前停止轮询
			this.stopPolling();
		},
		mounted() {
			this.init();
			this.getTH();
			this.getNxtInt();
		},
		methods: {
			//根据信息预测下一个值
			getNxtInt(){
				getintnext().then(res=>{
					this.nxtinten=res.predict;
				})
			},
			init() {
				this.chartContainer = echarts.init(this.$refs.chartContainer);
			
				this.chartContainer.setOption(this.option);
				// console.log(this.echart1);
			},
			beforeDestroy() {
				// 在组件销毁前停止轮询
				this.stopPolling();
			},
			startPolling() {
				// 使用定时器设置轮询间隔
				this.timer = setInterval(() => {
					this.fetchData();
				}, 10000); // 间隔时间为 1 min
			},
			stopPolling() {
				// 停止定时器
				clearInterval(this.timer);
			},
			fetchData() {
				// 向服务器发送请求，获取数据
				this.getTH();
				// this.getAve();
				setTimeout(() => {
					this.count++;
					// 每次请求成功后增加计数
				}, 1000); // 模拟请求延迟时间为 0.5 秒
			},

			//获取光照强度相关数据
			getTH() {
				//获取实时数据
				gettemhum().then(res => {

					//与后端传输
					//进行条件判断
					if (res.intensityCondition == 2) {
						this.$message({
							duration:10000,	
							message:'光强过高',
							type:'error',
						});
					} else if (res.intensityCondition == 0) {
						this.$message({
							duration:10000,	
							message:'光强过低',
							type:'error',
						});
					} else if (res.intensityCondition == 3) {
						// this.$message({
						// 	duration:10000,	
						// 	message:'异常了，请注意硬件设备',
						// 	type:'error',
						// });
						this.abnormal = res.intensity[9]
						this.time = res.time[9];
					}
					// console.log(res.intensity);
					// this.options1.datasets[0].data = res.intensity;
					// this.options1.labels = res.time;
					//赋值
					this.option.xAxis.data=res.time;
					this.option.series[0].data=res.intensity;
					//渲染
					this.chartContainer.setOption(this.option);
					//获取实时最新数据（光照强度）
					this.intensity = res.intensity[9];
					//计算平均值
					var sum= res.intensity[0] + res.intensity[1] + res.intensity[2] + res.intensity[3] + res
						.intensity[4] + res.intensity[5] + res.intensity[6] + res.intensity[7] + res.intensity[8] +
						res.intensity[9];
					var ave=sum/10;
					this.average=ave;
					// console.log(ave);

				});



			},




		},
	};
</script>

<style scoped>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #a0d175;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.bg-red{
		background: #ec4042;
	}

	.grid-content {
		display: flex;
		align-items: center;
		justify-content: center;
		/* text-align: center; */
		color: #ffffff;
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.schart-box {
		display: inline-block;
		margin: 20px;
	}

	.schart {

		width: 800px;
		height: 400px;
	}

	.content-title {
		clear: both;
		font-weight: 400;
		line-height: 50px;
		margin: 10px 0;
		font-size: 22px;
		color: #1f2f3d;
	}

	.ave-box {

		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		border-width: thin;
		border-style: solid;
		width: 20%;
		high: 30%;
	}
</style>